<template>
    <div> <h1 @click="go">{{this.username}}</h1>
            <table>
                <tr><td>id</td>
                    <td>商品</td>
                    <td>价格</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
                <tr v-for=" i in goods_list" :key="i.id">
                    <td>{{i.id}}</td>
                    <td>{{i.goods_name}}</td>
                    <td>{{i.goods_price}}</td>
                    <td><img :src="base_url + i.img" alt=""></td>
                    <td><button @click="add(i.id)">购买</button></td>
                </tr>
                <button @click="on_page">上一页</button>
                <button v-for="p in page_list" :key="p.id" @click="go_page(p)">{{p}}</button>
                <button @click="next_page">下一页</button>
            </table>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
                base_url:"http://127.0.0.1:8000",
                goods_list:[],
                page_list:[],
                page:1,
                page_sum:"",
                user:sessionStorage.getItem("token"),
                username:sessionStorage.getItem("name")
        }
    },
    methods: {
            get_goods(){
                axios({
                    url : this.base_url + "/app01/login/",
                    method:"get",
                    params:{"page":this.page}
                }).then(res=>{
                    
                    this.goods_list=res.data.data
                    this.page_list=res.data.page_list
                    this.page_sum=res.data.page_sum
                })
            },
            on_page(){
                if(this.page>1){
                    this.page --
                    this.get_goods()
                }
            },
            next_page(){
                if(this.page<this.page_sum){
                    this.page ++
                    this.get_goods()
                }
            },
            go_page(num){
                this.page = num
                this.get_goods()
            },
            add(goods_id){
                let form_data=new FormData()
                form_data.append("user",this.user)
                form_data.append("goods",goods_id)
                form_data.append("number",1)
                axios({
                    url : this.base_url +"/app01/order/",
                    method:"post",
                    data:form_data
                }).then(res=>{
                    console.log(res.data)
                })
            },
            go(){
                this.$router.push({name: 'showuser'})
            }
    },
    created() {
            this.get_goods()
    }
}
</script>

<style scoped>

</style>

